var $ = require('jquery');
var util = require('imutil');
var Backbone = require('backbone');
var bus = require('bus');

var tpl = require('../tpl');

var Nav = require('../view/nav');

module.exports = Backbone.View.extend({
	tagName: 'div',
	className: 'webim-touch',
	template: tpl.layout.main,
	events: {
		'click': 'stop'
	},
	initialize: function(options, api, navModel){
		var _this = this;
		this.api = api;

		this.render();
		this.__elems();

		this.api.nav = new Nav({
			el: this.$header.find('.J-im-nav')
		}, this.api);
		
		this.adjustSize();
		this.api.ready(function(){
			_this.adjustSize();
		});

		this.listenTo(bus, 'window.resize', function(size){
			this.adjustSize(size);
		});
	},
	adjustSize: function(size){
		//this.api.ready(function(){
			this.$el.css({height: size && size.height || util.winSize().height});
			this.$body.css({height: (size && size.height || util.winSize().height) - parseFloat(this.$body.css('marginTop'))});
		//});
	},
	render: function(){
		this.$el.appendTo('body');
		this.$el.html(this.template());
	},
	__elems: function(){
		var _this = this;

		var $elems = {
			header: this.$('.J-im-header'),
			body: this.$('.J-im-body'),
			footer: this.$('.J-im-footer')
		};

		util.each($elems, function($el, key){
			_this['$' + key] = $el;
		});
	},
	stop: function(e){
		//e.preventDefault();
		e.stopPropagation();
	},
	addPage: function(){
		var $page = $('<div class="im-content"></div>');
		this.$body.append($page);

		return $page;
	},
	open: function(){
		this.$el.show(200);
	},
	close: function(){
		this.$el.hide(200);
	}
});